<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01  全选和反选</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>
            <input type="checkbox" v-model = "checkedAll">全选
        </h3>
        <h3>
            <span v-for = "item in list">
                <input type="checkbox" :value = "list.value" v-model = "item.checked">
                {{item.msg}}

            </span>
        </h3>
    </div>
    
</body>
<script>



        new Vue({
            el : "#app",
            data : {
                checkedAll : false,
                list : [{id : 1 , value : 1 , msg : "篮球" , checked : true} , {id : 2 , value : 2 , msg : "足球" , checked : true} , {id : 3 , value : 3 , msg : "乒乓球" , checked : true}],
                checkedAll : true,
            },
            watch : {
                list : {
                    deep : true,
                    handler(newlist){
                        this.checkdeAll = this.list.every(item => item.checked)
                    },
                }
            },
            checkedAll(flag){
                this.list.forEach(item => {
                    item.checked = flag;
                });
            }
            
        })
</script>
</html>